<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('疫情防控部门数据查看')" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css"/>
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            padding-right: 0px;
            padding-left: 0px;
            font-size: 16px;
        }
        .ibox-title {
            background-color: #3A75C3;
            color: white;
            font-size: 16px;
        }
        .ibox-content {
            padding: 0px;
        }
        .ibox-content ul {
            padding: 0px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row" style="margin: 10px 0px; color:#3A75C3">
        <div class="col-xs-3">日期:</div>
        <div class="col-xs-8 date" style="padding: 0px;">
            <input type="text" style="width: 100%" name="belongDate" th:value="${belongDate}" id="datetime-picker" required="required">
        </div>
    </div>
    <div >
        <div style="padding-top: 0px;" id="deptTreeDiv" class="treeview"></div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <input id="curDeptId" type="hidden"></input>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <!--   内部人员，用于进行审核操作         -->
                    <div id="internalPersonnel" style="display: block">
                        <div class="ibox-title">
                            <label>汇总数据</label>
                        </div>
                        <div class="ibox-content">
                            <ul id="allInDataUl">
                                <li class="list-group-item">总人数：<span class="no-margins" id="usercnt" th:text="${usercnt}"></span></li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-xs-8">
                                            未填报人数：<span class="no-margins" id="notcollectcnt" th:text="${notcollectcnt}"></span>
                                        </div>
                                        <div class="col-xs-4">
                                            <button style="width: 100%;font-size: 16px" type="button" class="btn btn-primary" onclick="dataExportBtn(1)">导出</button>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-xs-8">
                                            总提交人数：<span class="no-margins" id="collectcnt" th:text="${collectcnt}"></span>
                                        </div>
                                        <div class="col-xs-4">
                                            <button style="width: 100%;font-size: 16px" type="button" class="btn btn-primary" onclick="dataExportBtn(2)">导出</button>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">审批通过人数：<span class="no-margins" id="aduitcnt" th:text="${aduitcnt}"></span></li>
                                <li class="list-group-item">未审批数：<span class="no-margins" id="notAduitcnt" th:text="${notAduitcnt}"></span></li>
                            </ul>
                        </div>
                        <div class="ibox-title">
                            <label>已审批数据</label>
                        </div>
                        <div class="ibox-content">
                            <ul id="auditedInDataUl">
                                <li class="list-group-item">正常数：<span id="nomalcnt" th:text="${nomalcnt}"></span></li>
                                <li class="list-group-item">核酸异常数：<span id="yangcnt" th:text="${yangcnt}"></span></li>
                                <li class="list-group-item">红码数：<span id="redcnt" th:text="${redcnt}"></span></li>
                                <li class="list-group-item">黄码数：<span id="yellowcnt" th:text="${yellowcnt}"></span></li>
                                <li class="list-group-item">行程码异常数：<span id="tripcnt" th:text="${tripcnt}"></span></li>
                                <li class="list-group-item">体温异常数：<span id="tempcnt" th:text="${tempcnt}"></span></li>
                            </ul>
                        </div>
                        <div class="ibox-title">
                            <label>未审批数据</label>
                        </div>
                        <div class="ibox-content">
                            <ul id="unauditInDataUl">
                                <li class="list-group-item">正常数：<span id="notAduitnomalcnt" th:text="${notAduitnomalcnt}"></span></li>
                                <li class="list-group-item">核酸异常数：<span id="notAduityangcnt" th:text="${notAduityangcnt}"></span></li>
                                <li class="list-group-item">红码数：<span id="notAduitredcnt" th:text="${notAduitredcnt}"></span></li>
                                <li class="list-group-item">黄码数：<span id="notAduityellowcnt" th:text="${notAduityellowcnt}"></span></li>
                                <li class="list-group-item">行程码异常数：<span id="notAduittripcnt" th:text="${notAduittripcnt}"></span></li>
                                <li class="list-group-item">体温异常数：<span id="notAduittempcnt" th:text="${notAduittempcnt}"></span></li>
                            </ul>
                        </div>
                    </div>
                    <!--   委外人员，用于查看详情         -->
                    <div id="externalPersonnel" style="display: none">
                        <div class="ibox-title">
                            <label>汇总数据</label>
                        </div>
                        <div class="ibox-content">
                            <ul>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-xs-8">
                                            总提交人数：<span class="no-margins" id="collectcnt1" th:text="${collectcnt}"></span>
                                        </div>
                                        <div class="col-xs-4">
                                            <button style="width: 100%;font-size: 16px" type="button" class="btn btn-primary" onclick="dataExportBtn(3)">导出</button>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">审批通过人数：<span class="no-margins" id="aduitcnt1" th:text="${aduitcnt}"></span></li>
                                <li class="list-group-item">未审批人数：<span class="no-margins" id="notAduitcnt1" th:text="${notAduitcnt}"></span></li>
                            </ul>
                        </div>
                        <div class="ibox-title">
                            <label>已审批数据</label>
                        </div>
                        <div class="ibox-content">
                            <ul>
                                <li class="list-group-item">正常数：<span id="nomalcnt1" th:text="${nomalcnt}"></span></li>
                                <li class="list-group-item">核酸异常数：<span id="yangcnt1" th:text="${yangcnt}"></span></li>
                                <li class="list-group-item">红码数：<span id="redcnt1" th:text="${redcnt}"></span></li>
                                <li class="list-group-item">黄码数：<span id="yellowcnt1" th:text="${yellowcnt}"></span></li>
                                <li class="list-group-item">行程码异常数：<span id="tripcnt1" th:text="${tripcnt}"></span></li>
                                <li class="list-group-item">体温异常数：<span id="tempcnt1" th:text="${tempcnt}"></span></li>
                            </ul>
                        </div>
                        <div class="ibox-title">
                            <label>未审批数据</label>
                        </div>
                        <div class="ibox-content">
                            <ul>
                                <li class="list-group-item">正常数：<span id="notAduitnomalcnt1" th:text="${notAduitnomalcnt}"></span></li>
                                <li class="list-group-item">核酸异常数：<span id="notAduityangcnt1" th:text="${notAduityangcnt}"></span></li>
                                <li class="list-group-item">红码数：<span id="notAduitredcnt1" th:text="${notAduitredcnt}"></span></li>
                                <li class="list-group-item">黄码数：<span id="notAduityellowcnt1" th:text="${notAduityellowcnt}"></span></li>
                                <li class="list-group-item">行程码异常数：<span id="notAduittripcnt1" th:text="${notAduittripcnt}"></span></li>
                                <li class="list-group-item">体温异常数：<span id="notAduittempcnt1" th:text="${notAduittempcnt}"></span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="exportDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabe2" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabe2">提示</h4>
                </div>
                <div class="modal-body">
                    数据为空，不能导出！
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    <script>
        var now = new Date();
        var year = now.getFullYear(); //年
        var month = now.getMonth() + 1; //月
        var day = now.getDate(); //日
        var hour = now.getHours(); //小时
        var order_time = `${year}-${month}-${day} ${hour}:00:00`;
        // 日期选择控件
        var yearList = [String(year-1),String(year)];
        var monthList = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
        var dayList = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18",
            "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"
        ];
        var dataList = [];
        var index = 0;
        for (var i = 0; i < yearList.length; i++) {
            // if (year <= +yearList[i]) {
            var a = {};
            a.value = yearList[i];
            a.label = `${yearList[i]}年`;
            index++;
            a.children = [];
            for (var j = 0; j < monthList.length; j++) {
                var b = {};
                b.label = `${monthList[j]}月`;
                b.value = monthList[j];
                index++;
                if (year == +yearList[i]) {
                    //if (month - 1 <= j) {
                    a.children[a.children.length] = b;
                    //}
                } else {
                    a.children[a.children.length] = b;
                }
                b.children = [];
                for (var o = 0; o < dayList.length; o++) {
                    var c = {};
                    c.label = `${dayList[o]}日`;
                    c.value = dayList[o];
                    index++;
                    if (month == +monthList[j]) {
                        //if (day - 1 <= o) {
                        b.children[b.children.length] = c;
                        // }
                    } else {
                        b.children[b.children.length] = c;
                    }
                    c.children = [];

                    if (j + 1 == 4 || j + 1 == 6 || j + 1 == 0 || j + 1 == 11) {
                        if (o == 29) o = 31;
                    } else if (j + 1 == 2) {
                        if (
                            (+yearList[i] % 4 == 0 && +yearList[i] % 100 != 0) ||
                            +yearList[i] % 400 == 0
                        ) {
                            if (o == 28) o = 31;
                        } else {
                            if (o == 27) o = 31;
                        }
                    }
                }
            }
            dataList[dataList.length] = a;
        }
        var appointment = '';
        $('.icon-picker').click(function () {
            $("#datetime-picker").click();
        })

        $("#datetime-picker").click(function () {
            weui.picker(dataList, {
                className: "custom-classname",
                container: "body",
                defaultValue: [year, month, day, hour],
                onConfirm: function (result) {
                    appointment = result[0] + "-" + result[1] + "-" + result[2] ;
                    $("#datetime-picker").val(appointment)
                    order_time = `${result[0]}-${result[1]}-${result[2]}`
                    dateChange();
                },
                id: "datetime-picker"
            });
        });
    </script>
    <script th:inline="javascript">
        document.getElementById("datetime-picker").onclick = function() {
            document.activeElement.blur();
        };
        var ctx = [[@{/}]];
        var prefix = ctx + "wxcp/epidemic/collect";
        $(function() {
            $("#datetime-picker").val(nowtime());
            //请求部门列表
            $.get(prefix + "/userPermisson/deptTree", function(result){
                console.log(result)
                if (result != null && result.data != null) {
                    $('#deptTreeDiv').treeview({
                        levels: 1,
                        color: "#3A75C3",
                        showTags: true,
                        data: result.data,
                        onNodeSelected: function (event, data) {
                            //根据部门id及部门类型(内部或者委外部门)获取统计数据并展示
                            if (data.outside == 'N') {
                                $('#internalPersonnel').attr("style","display:block;");
                                $('#externalPersonnel').attr("style","display:none;");
                            } else if (data.outside == 'Y') {
                                $('#internalPersonnel').attr("style","display:none;");
                                $('#externalPersonnel').attr("style","display:block;");
                            }
                            $("#myModalLabel").text("");
                            $("#myModalLabel").text(data.text+"-数据统计");
                            $("#curDeptId").val(data.deptId);
                            mysearch(data.deptId, data.outside);
                            $('#myModal').modal('show');
                        }
                    });
                }
            });
        });
        //数据导出功能
        function dataExportBtn(dataType) {
            if(dataType == 1) {
                if ($("#notcollectcnt").text() == "0") {
                    $('#exportDiv').modal('show');
                    return;
                }
            } else if(dataType == 2) {
                if ($("#collectcnt").text() == "0") {
                    $('#exportDiv').modal('show');
                    return;
                }
            } else if(dataType == 3) {
                if ($("#collectcnt1").text() == "0") {
                    $('#exportDiv').modal('show');
                    return;
                }
            }
            var curDeptId = $("#curDeptId").val();
            var date = $("#datetime-picker").val();
            window.location.href=ctx+"wxcp/yqLeaderView/export?deptId="+curDeptId+"&dataType="+dataType+"&date="+date;
        }
        //将当前时间转换成yyyymmdd格式
        function nowtime(){
            var mydate = new Date();
            var str = "" + mydate.getFullYear()+"-";
            var mm = mydate.getMonth()+1
            if(mydate.getMonth()>9){
                str += mm+"-";
            }
            else{
                str += "0" + mm+"-";
            }
            if(mydate.getDate()>9){
                str += mydate.getDate();
            }
            else{
                str += "0" + mydate.getDate();
            }
            return str;
        }

        function mysearch(deptId, flag){
            exptyData();
            // var date= nowtime();
            var date=$("#datetime-picker").val();
            $.ajax({
                url: "/wxcp/yqLeaderView/list",
                data: {"date":date,"deptId":deptId, "flag": flag},
                type: "post",
                success: function(result) {
                    if (result != null) {
                        $("#usercnt").text(result.usercnt);
                        $("#notcollectcnt").text(result.notcollectcnt);
                        $("#collectcnt").text(result.collectcnt);
                        $("#aduitcnt").text(result.aduitcnt);
                        $("#notAduitcnt").text(result.notAduitcnt);
                        $("#nomalcnt").text(result.nomalcnt);
                        $("#yangcnt").text(result.yangcnt);
                        $("#redcnt").text(result.redcnt);
                        $("#yellowcnt").text(result.yellowcnt);
                        $("#tripcnt").text(result.tripcnt);
                        $("#tempcnt").text(result.tempcnt);
                        $("#notAduitnomalcnt").text(result.notAduitnomalcnt);
                        $("#notAduityangcnt").text(result.notAduityangcnt);
                        $("#notAduitredcnt").text(result.notAduitredcnt);
                        $("#notAduityellowcnt").text(result.notAduityellowcnt);
                        $("#notAduittripcnt").text(result.notAduittripcnt);
                        $("#notAduittempcnt").text(result.notAduittempcnt);

                        $("#collectcnt1").text(result.collectcnt);
                        $("#aduitcnt1").text(result.aduitcnt);
                        $("#notAduitcnt1").text(result.notAduitcnt);
                        $("#nomalcnt1").text(result.nomalcnt);
                        $("#yangcnt1").text(result.yangcnt);
                        $("#redcnt1").text(result.redcnt);
                        $("#yellowcnt1").text(result.yellowcnt);
                        $("#tripcnt1").text(result.tripcnt);
                        $("#tempcnt1").text(result.tempcnt);
                        $("#notAduitnomalcnt1").text(result.notAduitnomalcnt);
                        $("#notAduityangcnt1").text(result.notAduityangcnt);
                        $("#notAduitredcnt1").text(result.notAduitredcnt);
                        $("#notAduityellowcnt1").text(result.notAduityellowcnt);
                        $("#notAduittripcnt1").text(result.notAduittripcnt);
                        $("#notAduittempcnt1").text(result.notAduittempcnt);
                    }
                }
            })
        }

        function exptyData() {
            $("#usercnt").text("");
            $("#notcollectcnt").text("");
            $("#collectcnt").text("");
            $("#aduitcnt").text("");
            $("#notAduitcnt").text("");
            $("#nomalcnt").text("");
            $("#yangcnt").text("");
            $("#redcnt").text("");
            $("#yellowcnt").text("");
            $("#tripcnt").text("");
            $("#tempcnt").text("");
            $("#notAduitnomalcnt").text("");
            $("#notAduityangcnt").text("");
            $("#notAduitredcnt").text("");
            $("#notAduityellowcnt").text("");
            $("#notAduittripcnt").text("");
            $("#notAduittempcnt").text("");

            $("#collectcnt1").text("");
            $("#aduitcnt1").text("");
            $("#notAduitcnt1").text("");
            $("#nomalcnt1").text("");
            $("#yangcnt1").text("");
            $("#redcnt1").text("");
            $("#yellowcnt1").text("");
            $("#tripcnt1").text("");
            $("#tempcnt1").text("");
            $("#notAduitnomalcnt1").text("");
            $("#notAduityangcnt1").text("");
            $("#notAduitredcnt1").text("");
            $("#notAduityellowcnt1").text("");
            $("#notAduittripcnt1").text("");
            $("#notAduittempcnt1").text("");
        }
    </script>
</div>

</body>
</html>